<template>
  <card>
    <h4 slot="header" class="card-title">停车场信息</h4>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="停车场名称">
        <el-input v-model="form.title" :disabled="isdisabled"></el-input>
      </el-form-item>
      <el-form-item label="停车场所在省份">
        <el-input v-model="form.province" :disabled="isdisabled"></el-input>
      </el-form-item>
      <el-form-item label="停车场所在市">
        <el-input v-model="form.city" :disabled="isdisabled"></el-input>
      </el-form-item>
      <el-form-item label="停车场所在区/县">
        <el-input v-model="form.district" :disabled="isdisabled"></el-input>
      </el-form-item>
      <el-form-item label="停车场所在地址">
        <el-input v-model="form.address" :disabled="isdisabled"></el-input>
      </el-form-item>

      <el-form-item label="车位信息">
        <el-button type="primary" plain @click="dialogTableVisible=true">编辑车位信息</el-button>
      </el-form-item>

      <el-form-item label="资费标准">
        <el-radio-group v-model="price">
          <el-radio label="每小时">
            每小时
            <el-input-number v-model="num1" :step="1" step-strictly></el-input-number>元
          </el-radio>

          <el-radio label="一小时">
            第一小时
            <el-input-number v-model="num2" :step="1" step-strictly></el-input-number>元，
            第二小时起
            <el-input-number v-model="num3" :step="1" step-strictly></el-input-number>元/小时，
            每天最高不超过
            <el-input-number v-model="num4" :step="1" step-strictly></el-input-number>元
          </el-radio>
          <el-checkbox v-model="ismounth">
            每月
            <el-input-number v-model="form.month" :step="1" step-strictly></el-input-number>元
          </el-checkbox>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="approve()" :disabled="approveDisable">授权</el-button>
        <el-button type="primary" @click="change()">修改</el-button>

        <el-button @click="back()">返回</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="编辑停车场地图"
      :visible.sync="dialogTableVisible"
      @opened="handleOpened"
      @close="dialogTableVisible = false"
    >
      <div style="width: 100%;height: 100%;">
        <div>
          停车场的长
          <el-input v-model="len1" placeholder="停车场的长" style="width: 20%;"></el-input>
        </div>
        <div>
          停车场的宽
          <el-input v-model="width1" placeholder="停车场的宽" style="width: 20%;"></el-input>
          <el-button type="primary" @click="handleChange1">确认</el-button>
        </div>

        <div>
          <el-select v-model="value" placeholder="请选择" @change="getValue()">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>

        <div id="container"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </card>
</template>
<script>
export default {
  data() {
    return {
      form: {
        id: "",
        province: "",
        city: "",
        district: "",
        price: [],
        space: [],
        address: "",
        month: 0
      },
      ismounth: false,
      price: "",
      isdisabled: false,
      dialogTableVisible: false,
      approveDisable:false,
      num1: 0,
      num2: 0,
      num3: 0,
      num4: 0,
      options: [
        {
          value: "车位",
          label: "车位"
        },
        {
          value: "入口",
          label: "入口"
        },
        {
          value: "出口",
          label: "出口"
        },
        {
          value: "道路",
          label: "道路"
        }
      ],
      value: "",
      circle: "",
      matrix: [
        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2]
      ],
      len1: 10,
      width1: 10
    };
  },
  mounted() {},
  created: function() {
    let role = localStorage.getItem('Authorization');
    const routerParams = this.$route.query.id;
    console.log(this.$route.query.id);
    if(role!=1){
      this.approveDisable=true;
    }
    if (routerParams != undefined) {
      this.getPark(routerParams);
      this.form.id = routerParams;
      this.isdisabled = true;
    }
  },
  methods: {
    approve() {
      this.$ajax({
        method: "post",
        url: "/admin/authorize",
        data: {
          id: parseInt(this.form.id)
        }
      })
        .then(res => {
          this.$message({
            type: "success",
            message: "授权成功!"
          });
        })
        .catch(error => {
          this.$message({
            type: "info",
            message: "授权失败!"
          });
        });
    },

    getPark(id) {
      this.$ajax({
        method: "get",
        url: "/admin/area/" + id
      })
        .then(res => {
         
        
          this.form = res.data.data[0];
        
           if(this.form.space.length>0)
          this.matrix=this.form.space;
          this.form.price = this.form.price.replace("[", "");
          this.form.price = this.form.price.replace("]", "");
          this.form.price = this.form.price.split(",").map(Number);

          if (this.form.price.length == 3) {
            this.num2 = this.form.price[0];
            this.num3 = this.form.price[1];
            this.num4 = this.form.price[2];
            this.price = "一小时";
          } else {
            this.num1 = this.form.price[0];
            this.price = "每小时";
          }
          if (this.form.month !== 0) {
            this.ismounth = true;
          }
        })
        .catch(error => {
          alert(error);
          console.log(error);
        });
    },
    handleOpened() {
      this.init(this.matrix);
    },
    checked() {
      if (this.price === "每小时") {
        this.form.price = new Array();
        this.form.price.push(this.num1);
      } else if (this.price === "一小时") {
        this.form.price = new Array();
        this.form.price.push(this.num2);
        this.form.price.push(this.num3);
        this.form.price.push(this.num4);
      }
      if (this.ismounth === false) {
        this.form.month = 0;
      }
      this.form.space = this.matrix;
    },
    onSubmit(formName) {
      this.checked();
      this.$ajax({
        method: "post",
        url: "/admin/area",
        data: this.form
      })
        .then(res => {
          this.$message({
            type: "success",
            message: "添加成功!"
          });
        })
        .catch(error => {
          this.$message({
            type: "info",
            message: "添加失败!"
          });
        });
    },
    init(correlationMatrix) {
      var options = {
        container: "#container",
        data: correlationMatrix
      };
      var margin = { top: 50, right: 50, bottom: 100, left: 100 },
        width = 350,
        height = 350,
        data = options.data,
        container = options.container;

      var widthLegend = 100;

      if (!data) {
        throw new Error("Please pass data");
      }

      if (!Array.isArray(data) || !data.length || !Array.isArray(data[0])) {
        throw new Error("It should be a 2-D array");
      }

      var maxValue = d3.max(data, function(layer) {
        return d3.max(layer, function(d) {
          return d;
        });
      });
      var minValue = d3.min(data, function(layer) {
        return d3.min(layer, function(d) {
          return d;
        });
      });

      var numrows = data.length;
      var numcols = data[0].length;
      d3.select("svg").remove();
      var svg = d3
        .select(container)
        .append("svg")
        .attr("fill", "white")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var background = svg
        .append("rect")
        .style("stroke", "black")
        .style("stroke-width", "2px")
        .attr("width", width)
        .attr("height", height);

      var x = d3.scale
        .ordinal()
        .domain(d3.range(numcols))
        .rangeBands([0, width]);

      var y = d3.scale
        .ordinal()
        .domain(d3.range(numrows))
        .rangeBands([0, height]);

      var row = svg
        .selectAll(".row")
        .data(data)
        .enter()
        .append("g")
        .attr("class", "row")
        .attr("transform", function(d, i) {
          return "translate(0," + y(i) + ")";
        });
      var cell = row
        .selectAll(".cell")
        .data(function(d) {
          return d;
        })
        .enter()
        .append("g")
        .attr("class", "cell")
        .attr("transform", function(d, i) {
          return "translate(" + x(i) + ", 0)";
        });

      var rect = row
        .selectAll(".cell")
        .append("rect")
        .attr("width", x.rangeBand())
        .attr("height", y.rangeBand())
        .style("stroke-width", 5)
        .style("stroke", "black")
        .attr("class", "circ");
      row.selectAll(".cell").style("fill", function(d) {
        if (d === 0) {
          //车位可用
          return d3.rgb(255, 182, 193);
        }
        if (d === -2) {
          //入口
          return d3.rgb(100, 149, 237);
        }
        if (d === -1) {
          //出口
          return d3.rgb(0, 255, 127);
        }
        if (d === 2) {
          //道路
          return d3.rgb(112, 128, 144);
        }
        if (d === 1) {
          //有车
          return d3.rgb(238, 130, 238);
        }
      });
    },
    changMatrix(pos, value) {
      var len = this.matrix.length;
      var width = this.matrix[0].length;

      this.matrix[Math.floor(pos / len)][pos % width] = value;
      console.log(this.matrix);
    },
    getValue() {
      let _this = this;
      if (this.value === "车位") {
        d3.selectAll(".circ").on("click", function(d, i) {
          _this.changMatrix(i, 0);
          d3.select(this).attr("fill", d3.rgb(255, 182, 193));
        });
      } else if (this.value === "入口") {
        d3.selectAll(".circ").on("click", function(d, i) {
          _this.changMatrix(i, -2);
          d3.select(this).attr("fill", d3.rgb(100, 149, 237));
        });
      } else if (this.value === "出口") {
        d3.selectAll(".circ").on("click", function(d, i) {
          _this.changMatrix(i, -1);
          d3.select(this).attr("fill", d3.rgb(0, 255, 127));
        });
      } else if (this.value === "道路") {
        d3.selectAll(".circ").on("click", function(d, i) {
          _this.changMatrix(i, 2);
          d3.select(this).attr("fill", d3.rgb(112, 128, 144));
        });
      } else if (this.value === "墙壁") {
        d3.selectAll(".circ").on("click", function(d, i) {
          d3.select(this).attr("fill", "#000000");
        });
      }
    },
    handleChange1() {
      var myarr = new Array(); //先声明一维
      for (var i = 0; i < this.len1; i++) {
        //一维长度为2
        myarr[i] = new Array(); //再声明二维
        for (var j = 0; j < this.width1; j++) {
          //二维长度为3
          myarr[i][j] = 2; // 赋值，每个数组元素的值为i+j
        }
      }

      this.init(myarr);
    },
    back() {
      this.$router.go(-1);
    },
    change() {
      this.checked();
      this.$ajax({
        method: "put",
        url: "/admin/area",
        data: this.form
      }).then(res => {
        if (res.data.error_no === 1) {
          this.$message({
            type: "success",
            message: "修改成功!"
          });
        } else {
          this.$message({
            type: "info",
            message: res.data.error_msg
          });
        }
      });
    }
  }
};
</script>